<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline" v-if="showFilter">
      <a-row type="flex">
        <a-col :md="5" :sm="7" style="margin-left: 15px">
          <a-form-item label="年份">
            <a-select v-model="queryParam.year" placeholder="请选择年份">
              <a-select-option v-for="(i, index) in yearList" :key="index" :value="i.key"
                >{{ i.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="5" :sm="7" style="margin-left: 15px">
          <a-form-item label="月份">
            <a-select v-model="queryParam.monthStr" placeholder="请选择月份">
              <a-select-option v-for="(i, index) in monthList" :key="index" :value="i.key"
                >{{ i.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="5" :sm="7" style="margin-left: 15px">
          <a-form-item label="区域">
            <a-popover placement="topLeft" v-model="popoverVisible" trigger="manual">
              <template slot="content">
                <span style="margin-left: 5px">💡 选择区域以显示折线图</span>
                <div class="closeWord">{{ countdown }}秒后关闭</div>
              </template>
              <a-select v-model="queryParam.area" placeholder="请选择区域">
                <a-select-option v-for="(i, index) in selectList" :key="index" :value="i.key"
                  >{{ i.name }}
                </a-select-option>
              </a-select>
            </a-popover>
          </a-form-item>
        </a-col>
        <a-col flex="auto" style="margin-left: 15px">
          <span class="table-page-search-submitButtons" style="float: left; overflow: hidden; margin-right: 20px">
            <a-button icon="search" style="margin-left: 10px" type="primary" @click="search">查询</a-button>
            <a-popover :overlayStyle="{ background: 'white' }" placement="topLeft">
              <template slot="content">
                <a-icon theme="twoTone" two-tone-color="#52c41a" type="exclamation-circle" /><span
                  style="margin-left: 5px"
                  >可以点击重置来重新筛选结果</span
                >
              </template>
              <a-button icon="reload" style="margin-left: 8px" @click="reset">重置</a-button>
            </a-popover>
          </span>
        </a-col>
      </a-row>
    </a-form>
    <a-form layout="inline" v-else-if="!showFilter">
      <a-row type="flex">
        <a-col :md="5" :sm="7" style="margin-left: 15px">
          <a-form-item label="区域">
            {{ queryParam.area }}
          </a-form-item>
        </a-col>
        <a-col flex="auto" style="margin-left: 15px">
          <span class="table-page-search-submitButtons" style="float: left; overflow: hidden; margin-right: 20px">
            <!--            <a-button icon="search" style="margin-left: 10px" type="primary" @click="search">查询</a-button>-->
            <a-popover :overlayStyle="{ background: 'white' }" placement="topLeft">
              <template slot="content">
                <a-icon theme="twoTone" two-tone-color="#52c41a" type="exclamation-circle" /><span
                  style="margin-left: 5px"
                  >可以点击重置来重新筛选结果</span
                >
              </template>
              <a-button icon="reload" style="margin-left: 8px" @click="reset(1)">重置</a-button>
            </a-popover>
          </span>
        </a-col>
      </a-row>
    </a-form>
    <a-row type="flex">
      <a-col flex="500px" v-if="showCharts">
        <a-popover placement="bottom" v-model="popoverVisibleCharts" trigger="manual">
          <template slot="content">
            <!--            <a-icon theme="twoTone" two-tone-color="#52c41a" type="exclamation-circle" />-->
            <span style="margin-left: 5px">💡 点击折线上的点可以根据X轴筛选右侧表格</span>
            <div class="closeWord">{{ countdownCharts }}秒后关闭</div>
          </template>
          <div class="chartFirst">
            <monthly-monitoring
              ref="monthlyMonitoringRef"
              @xAxisValue="handleXAxisValue"
              :height="500"
              :area="queryParam.area"
            ></monthly-monitoring>
          </div>
        </a-popover>
      </a-col>
      <a-col flex="auto">
        <span v-if="showTimeTips">当前展示的时间区间：{{ queryParam.monthStr }}月</span>

        <div class="tableSecond">
          <monitoringTable
            ref="monitoringTableRef"
            :height="500"
            :area="queryParam.area"
            :queryParamData="queryParam"
          ></monitoringTable>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import MonitoringTable from '@views/dataVisualization/components/monitoringTable'
import MonthlyMonitoring from '@views/dataVisualization/components/monthlyMonitoring'
import { USER_INFO } from '@/store/mutation-types'
import Vue from 'vue'
import { getAction } from '@api/manage'

const date = new Date()
const count = date.getFullYear() - 2020
const yearList = []
for (let i = 0; i < count + 1; i++) {
  yearList.push({
    name: date.getFullYear() - i,
    key: date.getFullYear() - i,
  })
}

export default {
  name: 'monthlyIndex',
  components: { MonthlyMonitoring, MonitoringTable },
  data() {
    return {
      queryParam: {
        year: 2024,
        monthStr: '1-2',
      },
      showCharts: false,
      monthList: [
        { name: '1-2', key: '1-2' },
        { name: '1-3', key: '1-3' },
        { name: '1-4', key: '1-4' },
        { name: '1-5', key: '1-5' },
        { name: '1-6', key: '1-6' },
        { name: '1-7', key: '1-7' },
        { name: '1-8', key: '1-8' },
        { name: '1-9', key: '1-9' },
        { name: '1-10', key: '1-10' },
        { name: '1-11', key: '1-11' },
        { name: '1-12', key: '1-12' },
      ],
      selectList: [
        { name: '黄浦区', key: '黄浦区' },
        { name: '徐汇区', key: '徐汇区' },
        { name: '长宁区', key: '长宁区' },
        { name: '静安区', key: '静安区' },
        { name: '普陀区', key: '普陀区' },
        { name: '虹口区', key: '虹口区' },
        { name: '杨浦区', key: '杨浦区' },
        { name: '闵行区', key: '闵行区' },
        { name: '宝山区', key: '宝山区' },
        { name: '嘉定区', key: '嘉定区' },
        { name: '浦东新区', key: '浦东新区' },
        { name: '金山区', key: '金山区' },
        { name: '松江区', key: '松江区' },
        { name: '青浦区', key: '青浦区' },
        { name: '奉贤区', key: '奉贤区' },
        { name: '崇明区', key: '崇明区' },
      ],
      yearList: yearList,
      popoverVisible: false, // 控制 a-popover 的显示状态
      popoverVisibleCharts: false, // 控制 a-popover 的显示状态
      countdown: 5, // 倒计时的初始值
      countdownCharts: 5, // 倒计时的初始值
      showTimeTips: false,
      timeTipsCount: 0,
      showFilter: false,
      url: {
        list: '/carbon/earlyWarnPrediction/list',
      },
    }
  },
  methods: {
    reset(status) {
      let account = Vue.ls.get(USER_INFO).realname

      if (status == 1) {
        this.queryParam = {
          area: account,
        }
        this.$refs.monitoringTableRef.searchReset(1)
      } else {
        this.queryParam = {}
        this.$refs.monitoringTableRef.searchReset()
        this.showCharts = false
      }
      this.showTimeTips = false
    },
    search() {
      this.loadData()
      if (this.queryParam.area) {
        this.showCharts = true
        this.timeTipsCount++
        if (this.timeTipsCount < 2) {
          this.popoverVisibleCharts = true
          this.startCountdownCharts()
        }
      }
    },
    startCountdown() {
      let interval = setInterval(() => {
        if (this.countdown > 1) {
          this.countdown -= 1
        } else {
          this.popoverVisible = false
          clearInterval(interval)
        }
      }, 1000)
    },
    startCountdownCharts() {
      let interval = setInterval(() => {
        if (this.countdownCharts > 1) {
          this.countdownCharts -= 1
        } else {
          this.popoverVisibleCharts = false
          clearInterval(interval)
        }
      }, 1000)
    },
    handleXAxisValue(value) {
      this.showTimeTips = true
      this.$set(this.queryParam, 'monthStr', value)
      this.$nextTick(() => {
        if (this.$refs.monitoringTableRef) {
          this.$refs.monitoringTableRef.searchQuery()
        }
      })
    },
    loadData() {
      this.$refs.monitoringTableRef.searchQuery()
      if (this.$refs.monthlyMonitoringRef) {
        setTimeout(() => {
          this.$refs.monthlyMonitoringRef.asyncData()
        }, 200)
      }
    },
  },
  mounted() {
    getAction(this.url.list, '').then((res) => {
      if (res.success) {
        this.yearList = res.result.yearList.map((item) => {
          return {
            name: item,
            key: item,
          }
        })
        this.monthList = res.result.monthList.map((item) => {
          return {
            name: item + '月',
            key: item,
          }
        })
      }
    })

    let account = Vue.ls.get(USER_INFO).realname
    if (account.includes('区')) {
      this.queryParam.area = account
      this.showFilter = false
      this.search()
    } else {
      this.showFilter = true
    }
    this.$nextTick(() => {
      this.popoverVisible = true // 在 DOM 元素都渲染完成后显示 popover
      this.startCountdown() // 启动倒计时
    })
  },
}
</script>

<style lang="stylus" scoped>
.chartFirst {
  width 100%
  height 500px
  margin-top -30px
}

.tableSecond {
  width 100%
  height 500px;
}

.closeWord {
  text-align: right; /* 让文字靠右显示 */
  font-size: 12px;
  color: #aaa;
  margin-top: 5px;
}
</style>
